<template>
	<section>
		<div>
			
		</div>
		<div>
			<commit-chart :data='lineFormatData' :options='lineOptions'></commit-chart>
		</div>
	</section>
</template>
<script>
import CommitChart from '@/components/chart/Line'
import { breathService } from '@/api'

export default {
	name: 'home',
	data() {
		return {
			lineData: [],
			lineStyle: {
				label: '呼吸捕捉',
				// backgroundColor: 'rgba(0, 0, 0, 0)',
				backgroundColor: '#f87979',
				borderColor: '#f87979',
				fill: false,
				pointRadius: 0,
			},
			// lineOptions: {
			// 	responsive: true,
			// 	maintainAspectRatio: false,
			// }

			lineOptions: {
				responsive: true,
				maintainAspectRatio: false,
				title: {
					display: true,
					text: '呼吸音量'
				},
				tooltips: {
					mode: 'index',
					intersect: false,
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '时间'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '音量'
						},
						// gridLines: {
						// 	drawBorder: false,
						// 	color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
						// }
					}]
				}
			}


			// line: {
			// 	data: {
			// 		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'January', 'February', 'March', 'April', 'May', 'June', 'July'],
			// 		datasets: [{
			// 			label: '呼吸捕捉',
			// 			// backgroundColor: '#f87979',
			// 			backgroundColor: 'rgba(0, 0, 0, 0)',
			// 			data: [40, 39, 10, 40, 39, 80, 40, 40, 39, 10, 40, 39, 80, 40, 40, 39, 10, 40, 39, 80, 40]
			// 		}]
			// 	},
			// 	options: { responsive: true, maintainAspectRatio: false }
			// }
		}
	},
	components: {
		CommitChart
	},
	computed: {
		lineFormatData() {
			let labels = this.lineData.map(({ name }) => name);
			let data = this.lineData.map(({ value }) => value);

			return {
				labels,
				datasets: [Object.assign(this.lineStyle, { data })]
			}
		},
	},
	methods: {
		getBreathLogs() {
			breathService.getBreathLogs()
				.then(res => {
					this.lineData = res;
				})
		}
	},
	mounted() {
		this.getBreathLogs();
		// let max = 120;
		// let time = 0;
		// let step = 0.1;
		// let t = setInterval(() => {
		// 	let num = Math.round(Math.random() * max);
		// 	time += step;
		// 	this.lineData.push({ name: time.toFixed(2), value: num });
		// 	if (time > 6) console.log(this.lineData) || clearInterval(t);

		// }, step * 1000)
	}

}

</script>
